<template>
	<section class="content-box">
		<div>
		<el-col class="toolbar">
			<el-col :span="12">
				<h2>利润预算执行表</h2>
			</el-col>
		</el-col>
		<el-col class='toolbar'>
			<el-col :span="24">
				<span>年份：</span>
				<el-select v-model="BirthYear" @change="Yearchan()"  filterable placeholder="请选择">
					<el-option v-for="item in year" :key="item.Code" :label="item.Name" :value="item.Code"></el-option>
				</el-select>
				<span>预算树：</span>
				<el-select v-model="lzBude" @change="ChanLzB()"  filterable placeholder="请选择">
					<el-option v-for="item in BudgeTtreesubset" :key="item.index" :label="item.Name" :value="item.Code"></el-option>
				</el-select>
				<span>显示级别：</span>
				<el-select v-model="Levels" @change="hmBox()"  filterable placeholder="请选择">
					<el-option v-for="item in AccrueLevels" :key="item.index" :label="item.Name" :value="item.Code"></el-option>
				</el-select>
				<el-button type="primary" @click="lzAtain">确定</el-button>
			</el-col>
		</el-col>
		<!--列表-->
		<el-table :data="tableData" border style="overflow-x:auto;" max-height="750">
			<el-table-column fixed prop="BudgetCategoryName" label="预算分类" width="94" show-overflow-tooltip>
			</el-table-column>
			<el-table-column fixed prop="BudgetItemName" label="预算科目" width="300" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="1月累计" header-align="center">
				<el-table-column prop="Month1_p" label="年初预算" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month1_e" label="预算执行" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month1_s" label="执行差异" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month1_r" label="执行率" width="130" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="2月累计" header-align="center">
				<el-table-column prop="Month2_p" label="年初预算" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month2_e" label="预算执行" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month2_s" label="执行差异" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month2_r" label="执行率" width="130" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="3月累计" header-align="center">
				<el-table-column prop="Month3_p" label="年初预算" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month3_e" label="预算执行" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month3_s" label="执行差异" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month3_r" label="执行率" width="130" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="4月累计" header-align="center">
				<el-table-column prop="Month4_p" label="年初预算" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month4_e" label="预算执行" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month4_s" label="执行差异" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month4_r" label="执行率" width="130" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="5月累计" header-align="center">
				<el-table-column prop="Month5_p" label="年初预算" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month5_e" label="预算执行" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month5_s" label="执行差异" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month5_r" label="执行率" width="130" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="6月累计" header-align="center">
				<el-table-column prop="Month6_p" label="年初预算" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month6_e" label="预算执行" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month6_s" label="执行差异" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month6_r" label="执行率" width="130" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="7月累计" header-align="center">
				<el-table-column prop="Month7_p" label="年初预算" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month7_e" label="预算执行" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month7_s" label="执行差异" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month7_r" label="执行率" width="130" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="8月累计" header-align="center">
				<el-table-column prop="Month8_p" label="年初预算" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month8_e" label="预算执行" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month8_s" label="执行差异" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month8_r" label="执行率" width="130" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="9月累计" header-align="center">
				<el-table-column prop="Month9_p" label="年初预算" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month9_e" label="预算执行" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month9_s" label="执行差异" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month9_r" label="执行率" width="130" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="10累计" header-align="center">
				<el-table-column prop="Month10_p" label="年初预算" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month10_e" label="预算执行" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month10_s" label="执行差异" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month10_r" label="执行率" width="130" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="11月累计" header-align="center">
				<el-table-column prop="Month11_p" label="年初预算" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month11_e" label="预算执行" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month11_s" label="执行差异" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month11_r" label="执行率" width="130" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
			<el-table-column label="12月累计" header-align="center">
				<el-table-column prop="Month12_p" label="年初预算" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month12_e" label="预算执行" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month12_s" label="执行差异" width="130" align="right" :formatter="dealF">
				</el-table-column>
				<el-table-column prop="Month12_r" label="执行率" width="130" align="right" :formatter="dealF">
				</el-table-column>
			</el-table-column>
		</el-table>
		</div>
	</section>
</template>

<script>
	import axios from '../../util/axios';
	export default {
		name: 'lizhi',
		data() {
			return {
				BirthYear: '',
				Levels: '', //默认
				year: [],
				AccrueLevel: [], //级别集合
				tableData: [],
				lzBude: '',
				BudgeTtreesubset: [], //预算树下拉表
				showBox:'',
				showCode:0,
				DeparCode:1,
			}
		},
		methods: {
			GetYearList(){
				axios.post('GetYearList')
				.then(res => {
        				console.log(res)
        				this.year = res
        				this.BirthYear = res[res.length-1].Code
        				this.showBox = this.BirthYear
        				this.LzbudhetTree()
        				this.ListJson();
        			})
				.catch(err => {
        				console.log(err)
        			})
			},

			lzAtain() { //确定按钮
				console.log(this.BirthYear, this.lzBude, this.Levels)
				this.showBox = this.BirthYear
				this.showCode = this.lzBude
				this.DeparCode = this.Levels
				this.ListJson();
			},
			Yearchan() { //年份发生改变
				console.log(this.BirthYear)
			},
			LzbudhetTree() { //预算树选项列表
				let yusuanshu = {Code:"0",Name:"全部"}
				axios.post('BudgetList', {
					year: this.BirthYear
				}).then(res => {
					console.log(res)
					res.unshift(yusuanshu)
					this.BudgeTtreesubset = res;
					this.lzBude = this.BudgeTtreesubset[0].Code
				}).catch(err => {
					console.log(err)
				})

			},

			//请求列表数据
			ListJson() { //总表
				axios.post('Profitstatemen', {
					yearBudget: this.showCode, //预算树
					year: this.showBox, //年份
					level: this.DeparCode
				}).then(res => {
					this.tableData = res
					console.table('总表', this.tableData)
				}).catch(err => {
					console.log(err)
				})
			},
			AccrueLevels() { //请求级别数据
				axios.post('AccrueLevels', {})
				.then(res => {
					console.log(res);
					this.AccrueLevels = res;
					this.Levels = res[0].Name
				}).catch(err => {
					console.log(err);
				})
			},
			hmBox() {
				console.log(this.Levels)
			},
			ChanLzB() {
				console.log(this.lzBude)
			},
			dealF(e,cell,cellValue) {
					console.log("1111111",cellValue)
					if(cellValue == 0){
						return ''
					}else{
						return cellValue
					}	   
				},

		},
		created() {
			this.GetYearList();	
			this.AccrueLevels();
			
		},
		mounted() {

		},
	}
</script>
<style scoped lang="scss">
	@import '../../common/css/index.css';
	.toolbar {
		h2 {
			font-weight: 100;
			margin: 0 auto;
		}
	}
	
	;
</style>